<template>
  <div class="departments">
    <el-card>
      <el-tabs class="el_tabs" v-model="activeName">
        <el-tab-pane label="组织架构" name="first"></el-tab-pane>
      </el-tabs>
      <!-- <template #header>
        <div>
          组织架构
        </div>
      </template> -->
      <div class="tree">
        <TreeItem :item="topInfo"></TreeItem>
        <hr />
        <el-tree :data="list" :props="{ children: 'children' }">
          <template v-slot="{ data }">
            <TreeItem
              style="width:100%;"
              :item="data"
              @getData="getData"
            ></TreeItem>
          </template>
        </el-tree>
      </div>
    </el-card>
    <DialogItem :initList="initList" @getData="getData"></DialogItem>
  </div>
</template>

<script>
import TreeItem from './components/tree-item.vue'
import { companydepartment } from '@/api/departments.js'
import DialogItem from './components/dialogitem.vue'
export default {
  components: {
    TreeItem,
    DialogItem
  },
  data () {
    return {
      activeName: 'first',
      topInfo: {
        name: '传智',
        manager: '负责人',
        isshow: true,
        id: '' //确定当前点击项的PId
      },
      list: [],
      initList: [] // 原始组织架构
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await companydepartment()
      this.topInfo.name = res.data.companyName
      this.initList = res.data.depts // 存储原始数据的
      this.list = this.changeDate(res.data.depts, '')
      console.log('菜鸡', res)
    },
    changeDate (arr, str = '') {
      return arr.filter(item => {
        if (item.pid === str) {
          item.children = this.changeDate(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  width: 100%;
  padding: 20px;
  // padding: 40px 80px;
  .el_tabs {
    padding: 30px;
  }
  .tree {
    width: 80%;
    margin: 0 auto;
  }
}
</style>
